<!-- 弹窗 -->
<template>
    <div class='toast-main' v-show="isShow">
        <div class="box">
            <div class="title">温馨提示</div>
            <div class="body">
                <div>悦享积分兑换活动将于2020年12月20日结束。</div>
                <div>①优惠券需于2020年12月20日前使用，逾期未使用即失效；</div>
                <div>②未兑换的积分将在2020年12月21日清零；</div>
                <div>③已兑换产品请于2020年12月31日前核销，来不及核销的产品请自行保存好卡号卡密等关键信息。</div>
                <div>本活动链接将于2020年12月31日后关闭升级。</div>
            </div>
            <div class="footer">
                <div class="btn" @click="handleClick">我知道了</div>
            </div>
        </div>
    </div>
</template>

<script>

export default {
    mixins: [],
    components: {},
    data() {
        return {
            isShow: false
        };
    },
    methods: {
        handleOpen() {
            this.isShow = true;
        },
        handleClick() {
            this.isShow = false;
        },
    },
    created() { },
    mounted() { },
}

</script>

<style lang="scss" scoped>
.toast-main {
  transition: all 0.3s;
  width: 100vw;
  min-height: 100vh;
  height: 100%;
  position: fixed;
  top: 0;
  background-color: rgba(0, 0, 0, 0.69);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 99000;
  .box {
    background-color: #fff;
    display: flex;
    flex-flow: column;
    width: 80%;
    min-width: 375px;
    border-radius: 20px;
    padding-bottom: 18px;
    .title {
      width: 100%;
      height: 80px;
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 32px;
      margin: 14px 0;
    }

    .body {
      width: 100%;
      flex: 1;
      padding: 0 40px;
      margin-bottom: 26px;
      font-size: 28px;
      > div {
        margin-bottom: 4px;
      }
    }

    .footer {
      width: 100%;
      height: 100px;
      display: flex;
      justify-content: center;
      align-items: center;
      .btn {
        background-color: #33ba75;
        color: #fff;
        width: 61%;
        display: flex;
        justify-content: center;
        align-items: center;
        height: 80px;
        border-radius: 10px;
      }
    }
  }
}
</style>